<template>
    <div class="home-container">
        <el-container>
            <!-- 轮播图 -->
            <el-main>
                <el-carousel :interval="3000" type="card" height="350px" arrow="always">
                    <el-carousel-item v-for="item in ImgArray" :key="item.id">
                        <img :src="item.imageUrl" alt="carousel image" class="carousel-image" />
                    </el-carousel-item>
                </el-carousel>
            </el-main>
        </el-container>

        <!-- 商品分类 -->
        <div class="category-section">
            <h2 class="section-title">商品分类</h2>
            <el-row :gutter="20">
                <el-col
                    v-for="category in product_Category"
                    :key="category.id"
                    :xs="12" :sm="8" :md="6" :lg="4"
                >
                    <el-card
                        shadow="hover"
                        class="category-card"
                        @click.native="handleCategoryClick(category)"
                    >
                        <div class="category-content">
                            <i :class="category.icon || 'el-icon-goods'" class="category-icon"></i>
                            <p class="category-name">{{ category.categoryName }}</p>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>

        <!-- 热门商品 -->
        <div class="product-section">
            <h2 class="section-title">热门商品</h2>
            <el-row :gutter="20">
                <el-col
                    v-for="product in hotProducts"
                    :key="product.id"
                    :xs="12" :sm="8" :md="6" :lg="6"
                >
                    <el-card
                        :body-style="{ padding: '0px' }"
                        shadow="hover"
                        class="product-card"
                    >
                        <img :src="product.images[0].imageUrl" class="product-image" />
                        <div class="product-info">
                            <h3 class="product-title">{{ product.name }}</h3>
                            <div class="product-price">
                                <span class="current-price">¥{{ product.salePrice}}</span>
                            </div>
                            <div class="product-actions">
                                <el-button
                                    type="primary"
                                    size="mini"
                                    @click.stop="handleAddToCart(product.productId)"
                                >
                                    加入购物车
                                </el-button>
                                <el-button
                                    type="success"
                                    size="mini"
                                    @click.stop="handleViewDetail(product)"
                                >
                                    查看详情
                                </el-button>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    name: 'HomePage',
    data() {
        return {
            ImgArray: [], // 轮播图数据
            product_Category: [], // 分类数据
            hotProducts: [], // 热门商品数据
            vo: {},
        };
    },
    methods: {
        // 获取轮播图
        searchCarousel() {
            this.$axios.post(`carousel/AllCarousel2`, this.vo).then(r => {
                this.ImgArray = r.data;
            });
        },

        // 获取商品分类
        fetchCategories() {
            this.$axios.post('productCategory/listProductCategory').then(response => {
                this.product_Category = response.data;
            });
        },

        // 获取热门商品
        fetchHotProducts() {
            this.$axios.post('product/queryId').then(response => {
                this.hotProducts = response.data;
                console.log(99,response.data)
            });
        },

        // 分类点击事件
        handleCategoryClick(category) {
            this.$router.push({
                path: '/front_goodsAll'
            });
        },

        // 加入购物车
        handleAddToCart(productId) {
            let user = JSON.parse(sessionStorage.getItem('user'));//获取当前登录用户
            console.log(8888,user.id)
            this.$axios.get(`carts/add/${productId}/${user.id}/${1}`).then(res => {
                console.log(11111, res)
                if (res.data === 'yes') {
                    this.$message({
                        type: 'success',
                        message: '加入购物车成功'
                    });
                } else {
                    this.$message({
                        type: 'error',
                        message: '加入购物车失败'
                    });
                }
            })
        },

        // 查看商品详情
        handleViewDetail(product) {
            this.$router.push(`/productDetail/${product.productId}`);
        }
    },
    created() {
        this.searchCarousel(); // 获取轮播图
        this.fetchCategories(); // 获取分类数据
        this.fetchHotProducts(); // 获取热门商品
    },
};
</script>

<style scoped>
.home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* 轮播图样式 */
.carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* 分类区域 */
.category-section {
    margin: 40px 0;
}

.category-card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.3s;
}

.category-card:hover {
    transform: translateY(-5px);
}

.category-content {
    text-align: center;
    padding: 15px 0;
}

.category-icon {
    font-size: 30px;
    color: #409EFF;
    margin-bottom: 10px;
}

.category-name {
    font-size: 14px;
    margin: 0;
}

/* 商品区域 */
.product-section {
    margin: 40px 0;
}

.section-title {
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.product-card {
    margin-bottom: 20px;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.product-info {
    padding: 15px;
}

.product-title {
    font-size: 16px;
    margin: 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-price {
    margin-bottom: 10px;
}

.current-price {
    font-size: 18px;
    color: #f56c6c;
    font-weight: bold;
}

.original-price {
    font-size: 14px;
    color: #999;
    text-decoration: line-through;
    margin-left: 8px;
}

.product-actions {
    display: flex;
    justify-content: space-between;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .product-image {
        height: 120px;
    }

    .section-title {
        font-size: 20px;
    }
}
</style>